@mixin background-burst($color) {
  &:hover:before {
    transform: scale(1);
  }

  &:before {
    content: "";
    position: absolute;
    border-radius: 50%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transition: transform 100ms;
    transform: scale(0);
    background-color: $color;
  }
}

@mixin error-bg {
  background: linear-gradient(
    to top,
    lighten($yellow, 10%),
    $yellow 2%,
    $yellow-dark 98%,
    lighten($yellow, 10%)
  );
  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.4);
  border-radius: 3px;
}
